<!DOCTYPE html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Flip Demo | Side to Side</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
      /* CSS styles */
      /* Example by Ruud Burger at https://codepen.io/RuudBurger/pen/bwjry */
      /* Extended by Steven Woodward to include side to side flip */
      @import url(http://fonts.googleapis.com/css?family=Open+Sans);

      body {
        background: linear-gradient(to  right, #0066ff 0%, #ff33cc 100%);
      
        font-family: Open Sans;
        font-size: 50px;
        color: #222;
      }
      body:hover{
        background: linear-gradient(to  left, #1d3969 0%, #8a1d6f 100%);
      }
      .front:hover{
        background: linear-gradient(to  left, #a156c6 0%, #2097c6 100%);
      }

      label {
        -webkit-perspective: 1000px;
        perspective: 1000px;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        display: block;
        width: 300px;
        height: 200px;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        cursor: pointer;
      }

      .card {
        position: relative;
        height: 100%;
        width: 100%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: all 600ms;
        transition: all 600ms;
        z-index: 20;
      }

      .card div {
        position: absolute;
        height: 100%;
        width: 100%;
        background: #fff;
        text-align: center;
        line-height: 200px;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        border-radius: 2px;
      }

      .card .back {
        background: #222;
        color: #fff;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
      }

      label:hover .card {
        -webkit-transform: rotateY(20deg);
        transform: rotateY(20deg);
        box-shadow: 0 20px 20px rgba(50, 50, 50, 0.2);
      }

      input {
        display: none;
      }

      :checked + .card {
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
      }

      label:hover :checked + .card {
        transform: rotateY(160deg);
        -webkit-transform: rotateY(160deg);
        box-shadow: 0 20px 20px rgba(255, 255, 255, 0.2);
      }
    </style>
  </head>
  <body>
    <!--[if lt IE 8]>
      <p class="browserupgrade">
        You are using an <strong>outdated</strong> browser. Please
        <a href="http://browsehappy.com/">upgrade your browser</a> to improve
        your experience.
      </p>
    <![endif]-->
    <!-- Label -->
    <label>
      <input type="checkbox" />
      <div class="card">
        <div class="front">Front</div>
        <div class="back">Back</div>
      </div>
    </label>
  </body>
</html>
